<template>
    <merc-box :lazy="true" v-model="visible" :title="title" :width="1600"  :height="1000" :padding="5" :fullscreen="true"
        :onModelClose="onModelClose" ref="detailBox">
        <basic-container>
            <el-table :data="directIndentlist" :span-method="arraySpanMethod" ref="tableELe" style="width: 100%;"
                size="small" :cell-style="cellStyle" :row-class-name="tableRowClassName">
                <el-table-column label="钢种" align="center" prop="marterialName" min-width="100" style="background-color: chocolate;"></el-table-column>
                <el-table-column label="化学元素" align="center" prop="batch" min-width="140">
                    <el-table-column label="" align="center" prop="batch" min-width="70"></el-table-column>
                    <el-table-column label="" align="center" prop="description" min-width="70"></el-table-column>
                </el-table-column>
                <el-table-column v-for="(item, index) in dynamicField" :key="index" :label="item" align="center"
                    :prop="item" min-width="70" style="background-color: chocolate;"></el-table-column>

            </el-table>

        </basic-container>
    </merc-box>
</template>
   
<script>
import MercBox from '@/components/basic/MercBox.vue';
export default {
    data() {
        return {
            directIndentlist: [],
            dataList: [],
            dynamicField: [],
            visible: false,
            currentData: []
        }
    },
    components: {
        MercBox
    },
    mounted(){
        //this.$refs.detailBox.fullscreen = true;
    },
    created() {
    },
    updated() {
        if (this.$refs.tableELe && this.$refs.tableELe.doLayout) {
            this.$refs.tableELe.doLayout();
        }
    },
    methods: {
        onModelClose(){
            this.directIndentlist=[];
            this.dataList = [];
            this.dynamicField = [];
            this.currentData = [];
            this.visible =false;
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 === 0)
                return 'success-row';
            return '';
        },
        cellStyle(row) {
            var tempRow = this.currentData[row.rowIndex];
            if (tempRow.cellStyle) {
                var cellStyle = tempRow.cellStyle[row.column.property];
                if (cellStyle) {
                    console.log(cellStyle);
                    return cellStyle;
                }
            }
            return {};
        },
        show(orderNo, title) {
            this.http.post(`api/IngredientList/GetIngredientListInfo/${orderNo}`, null, true)
                .then((x) => {
                    if (!x.status) return this.$message.error(x.message);
                    this.dynamicField = x.data.varField
                    this.currentData = x.data.data
                    this.formatTableData(x.data.data)

                    // 获取动态列
                    var dataList = this.directIndentlist[0].dataList;
                    this.dataList = dataList;
                });
            this.visible = true;
        },
        //自定义列显示的数据
        dataFormatter(row, index, prop) {
            if (row && row.dataList && row.dataList[index]) {
                var value = row.dataList[index][prop];
                return value;
            }
        },
        // 格式化表格数据
        formatTableData(tableData) {
            this.directIndentlist = [];
            tableData.forEach(item => {
                this.directIndentlist.push(item)
            })
            this.getSpanArr(this.directIndentlist)
            this.getSpanArr2(this.directIndentlist)
        },
        //合并行列
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                const _row = this.spanArr[rowIndex];
                let _col = _row > 0 ? 1 : 0;
                if (rowIndex < 6) {
                    if (rowIndex >= 4)
                        _col = 2;
                }
                return {
                    rowspan: _row,
                    colspan: _col
                }
            } else if (columnIndex === 1) {
                const _row = this.spanArr2[rowIndex];
                let _col = _row > 0 ? 1 : 0;
                if (rowIndex < 6) {
                    if (rowIndex >= 4)
                        _col = 0;
                    else if (rowIndex % 2 === 0)
                        _col = 2;

                }
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
            else if (columnIndex === 2) {
                if (rowIndex < 4)

                    return {
                        rowspan: 0,
                        colspan: 0
                    }
            }
        },
        //统计要合并的行（根据客户合并）
        getSpanArr(data = []) {
            this.spanArr = []
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr.push(1);
                    this.pos = 0
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i].marterialName === data[i - 1].marterialName) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.pos = i;
                    }
                }
            }
        },
        //统计要合并的行（根据销售类型合并）
        getSpanArr2(data = []) {
            this.spanArr2 = []
            for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr2.push(1);
                    this.pos = 0
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i].batch === data[i - 1].batch) {
                        this.spanArr2[this.pos] += 1;
                        this.spanArr2.push(0);
                    } else {
                        this.spanArr2.push(1);
                        this.pos = i;
                    }
                }
            }
        }
    }
};
</script>
   
<style>
.el-table__header-wrapper tr th,
.el-table__body-wrapper .el-table__row td {
    border: 1px solid #EBEEF5 !important;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>